---
import BaseHead from "../../components/BaseHead.astro";
import Header from "../../components/Header.astro";
import Footer from "../../components/Footer.astro";
import BlogView from "../../components/BlogView.vue";
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
import { getCollection } from "astro:content";
import { addReadTimes } from "../../utils/read-time";
const posts = (
  await getCollection("blog", ({ data }) => {
    return import.meta.env.PROD ? data.draft !== true : true;
  })
).map(addReadTimes).map((post)=> ({...post, body:undefined}));
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>

  <body>
    <Header />
    <main>
      <h1 class="pb-6">Blog</h1>
      <BlogView client:load posts={posts} />
    </main>
    <Footer />
  </body>
</html>
